1. code

import React, { useState } from 'react';
import styles from './ImageFlip.module.css';//導入模塊化樣式

//處理圖像點擊事件和切換翻轉狀態
function ImageFlip() {
  const [isFlipped, setIsFlipped] = useState(false);

  const handleImageClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <div className={`${styles['image-container']} ${isFlipped ? styles.flipped : ''}`}>
      <div className={styles['image-front']} onClick={handleImageClick}>
        <img src="自定義圖片正面" alt="Front" height={150} width={150} />
        <p>正面</p>
      </div>
      <div className={styles['image-back']} onClick={handleImageClick}>
        <img src="自定義圖片反面" alt="Back" height={150} width={150} />
        <p>反面</p>
      </div>
    </div>
  );
}

export default ImageFlip;

.image-container {
    perspective: 1000px;
    width: 200px;
    height: 200px;
    position: relative;
    cursor: pointer;
  }
  
  .image-front,
  .image-back {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.5s;
    backface-visibility: hidden;
  }
  
  .image-back {
    transform: rotateY(180deg);
  }
  
  .flipped .image-front {
    transform: rotateY(180deg);
  }
  
  .flipped .image-back {
    transform: rotateY(0deg);
  }

2.實作